import { VNode, nextTick } from "vue";
import { Popup } from "../popup";
import DrawerVue from "./drawer.vue";
import { DrawerOptions } from "./type";
import { ButtonGroup } from "../../button-group";
import { BasicTree } from "../..";
import { TreeOptions } from "../../basic-tree-box/type";

const baseConfig: treeOptions = {
	isReset: true,
};

type treeOptions = {
	/** 是否打开弹出层进行表单重置，默认重置 */
	isReset?: boolean;
	/** 组件挂在完毕回调 */
	mounted?: (tree: BasicTree) => void;
};

export class TreeDrawer extends Popup<DrawerOptions> {
	private treeInstace!: BasicTree;
	private buttonGroup!: ButtonGroup;
	constructor() {
		super(DrawerVue);
	}

	initTree(
		callback: (tree: BasicTree) => void,
		opt: Partial<TreeOptions> = {},
		config: treeOptions = baseConfig
	) {
		this.treeInstace = new BasicTree(opt);
		callback && callback(this.treeInstace);
		nextTick(() => {
			if (config.isReset) {
				this.treeInstace.setTreeSelection([]);
			}
		});
		return this;
	}

	initButton(callback: (btn: ButtonGroup, tree: BasicTree) => void) {
		this.buttonGroup = new ButtonGroup();
		callback && callback(this.buttonGroup, this.treeInstace);
		return this;
	}

	open(opts: DrawerOptions) {
		return this.showPopup(opts);
	}
	getContentVNode(): VNode {
		return this.treeInstace.getVNode();
	}
	getBottomVNode(): VNode {
		return this.buttonGroup?.getVNode();
	}
}

const treeDrawer = new TreeDrawer();
export { treeDrawer };
